<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static" />
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%--
  Created by IntelliJ IDEA.
  User: kong
  Date: 16/1/29
  Time: 下午6:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title></title>

  <c:url value="/css/bootstrap.min.css" var="bootstrapcss"/>
  <c:url value="/images/favicon.ico" var="favicon"/>
  <link rel="SHORTCUT ICON" href="${favicon}" />
  <link rel="stylesheet" type="text/css" href="${bootstrapcss}">

  <c:url value="/plugins/css/filter.css" var="filtercss"/>
  <link rel="stylesheet" type="text/css" href="${filtercss}">

  <c:url value="/plugins/css/page.css" var="pagecss"/>
  <link rel="stylesheet" type="text/css" href="${pagecss}">

  <c:url value="/css/luntan.css" var="luntancss"/>
  <link rel="stylesheet" type="text/css" href="${luntancss}">

</head>

<c:import url="/plugins/search"></c:import>

<div class="container">

  <div class="col-md-3 lutanleft">
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary" id="seekhelp" data-toggle="modal"
            data-target="#myModal">
      <span class="glyphicon glyphicon-edit"></span>发布求助帖
    </button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true" id="helpform">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close"
                    data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              发布求助帖
            </h4>
          </div>
          <div class="modal-body">
            <form class="modal-form" role="form">
              <div class="input-group form-inline">
                <label>标题:</label>
              </div>
              <div class="form-group">
                <input type="text" class="passport-txt xl w-full" placeholder="标题" aria-describedby="basic-addon1">
              </div>
              <div class="form-group">
                <label>内容:</label>
                <textarea class="form-control" rows="3" placeholder="输入您碰到的问题"></textarea>
              </div>
              <div class="form-group">
                <label class="sr-only" for="inputfile">选择图片</label>
                <input type="file" id="inputfile">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default passport-btn-def"
                    data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary passport-btn-primary">
              发布求助
            </button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>

  </div>


  <div class="col-md-9" id="luntan-body">
    <div class="classify">
      <div class="left-group pull-left">
        <button class="btn btn-classify">鸡</button>
        <button class="btn btn-classify selected">全部</button>
        <button class="btn btn-classify">已解决</button>
        <button class="btn btn-classify">未解决</button>
      </div>

      <div class="right-group pull-right">
        <button class="btn  btn-classify selected">
          <span class="glyphicon glyphicon-th-large"></span>
        </button>
        <button class="btn  btn-classify">
          <span class="glyphicon glyphicon-th-list"></span>
        </button>
      </div>
      <div class="clearfloat"></div>
    </div>
    <div class="bodycontent" id="bodycontent">
      <%--<c:forEach var="n" items="${data}">--%>
        <%--<div class="col-md-3">--%>
          <%--<a href="#" class=".seeklink">--%>
            <%--<div class="panel panel-default">--%>
              <%--<div class="panel-heading">${n.note.title}</div>--%>
              <%--<div class="panel-body well" style='height: 110px;overflow: scroll'>--%>
                <%--${n.note.content}--%>
              <%--</div>--%>
              <%--<div class="panel-footer">--%>
                <%--<div class="pull-left">--%>
                  <%--<span class="glyphicon glyphicon-user" id="${n.note.uid}"></span>碎痕--%>
                <%--</div>--%>
                <%--<div class="pull-right">--%>
                  <%--评论(${n.commentCount})--%>
                <%--</div>--%>
                <%--<div class="clearfloat" style="margin-bottom: 4%"></div>--%>
                <%--<div class="hidePanel">--%>
                  <%--<div class="pull-left" >--%>
                    <%--<span class="glyphicon glyphicon-map-marker"></span>${n.note.province} ${n.note.city}--%>
                  <%--</div>--%>
                  <%--<div class="pull-right" >--%>
                    <%--<span class="glyphicon glyphicon-time"></span>${n.currdate}--%>
                  <%--</div>--%>
                  <%--<div class="clearfloat"></div>--%>
                <%--</div>--%>
              <%--</div>--%>
            <%--</div>--%>
          <%--</a>--%>
        <%--</div>--%>


      <%--</c:forEach>--%>

    </div>
    <!-- 列表模式  -->
    <div class="col-lg-12" hidden="hidden">

    </div>

    <div class="page">
      <nav>
        <ul class="pagination" id="pc" name="pc">
        </ul>
      </nav>
    </div>
  </div>
</div>

<c:import url="/plugins/footer"></c:import>
</body>

<c:url value="/js/bootstrap.min.js" var="bootstrapjs"/>
<script type="text/javascript" src="${bootstrapjs}"></script>
<c:url value="/plugins/js/page.js" var="pagejs"/>
<script type="text/javascript" src="${pagejs}"></script>
<c:url value="/plugins/js/keywordLight.js" var="keylight"/>
<%--<script type="text/javascript" src="${keylight}"/>--%>

<script type="text/javascript">
  $.ajaxSetup({
    async:false
  });
  function note(noteid,title,content,uid,time,commentcount,province,city,keyword){
    var root = $("#bodycontent");
      var uname = "";
      $.get("/user/getName?uid="+uid.toString(), function (data) {
        uname = data['uname'];
      })
      var writer = uname.toString();
      if(writer.length>=7){
        writer = writer.substring(0,5)+"..";
      }
      var ct = content.toString();
      if(ct.length>=35){
        ct = ct.substring(0,35)+".....展开";
      }
      var title = title.toString();
      title = title.replace(keyword.toString(),"<a style='color: #cf4646'>"+keyword.toString()+"</a>");
      ct = ct.replace(keyword.toString(),"<a style='color: #cf4646'>"+keyword.toString()+"</a>");

      var now = new Date().getTime();
      var ndate = parseInt((now-Date.parse(new Date(time))) / (1000 * 60 * 60 * 24));
      if(ndate==0){
        ndate = parseInt((now-Date.parse(new Date(time))) / (1000 * 60 * 60));
        if(ndate==0){
          ndate = parseInt((now-Date.parse(new Date(time))) / (1000 * 60));
          ndate = ndate+"分钟前";
        }
        else
          ndate = ndate+"小时前";
      }else{
        ndate = ndate+"天前";
      }

      var colmd = $('<div></div>');
      colmd.addClass("col-md-3");
      var seeklink = $('<a></a>');
      seeklink.attr("href","/note/"+noteid+"/comment");
      seeklink.addClass("seeklink");
      var panel = $('<div></div>');
      panel.addClass("panel");
      panel.addClass("panel-default");
      var head = $("<div></div>");
      head.addClass("panel-heading");
      head.html(title);
      var content = $("<div style='height: 110px'></div>");
      content.addClass("panel-body");
      content.addClass("well");
      content.html(ct);
      var foot = $("<div></div>");
      foot.addClass("panel-footer");
      var fleft = $("<div></div>");
      fleft.addClass("pull-left");
      fleft.html("<span class='glyphicon glyphicon-user'></span>"+writer);
      var fright = $("<div></div>");
      fright.addClass("pull-right");
      fright.text("评论("+commentcount+")");
//      fright.html("<span class='glyphicon glyphicon-eye-open'></span>"+info['checkcount']+"<span class='glyphicon glyphicon-comment'></span>"+info['replycount']);
      var clr = $("<div style='margin-bottom: 4%'></div>");
      clr.addClass("clearfloat");

      var hidePanel = $('<div class="hidePanel"></div>');
      hidePanel.html('<div class="pull-left">'+
              '<span class="glyphicon glyphicon-map-marker"></span>'+province.toString()+' '+city.toString()+
              '</div>'+
              '<div class="pull-right" >'+
              '<span class="glyphicon glyphicon-time"></span>'+ndate+
              '</div>'+
              '<div class="clearfloat"></div>');

      foot.append(fleft);
      foot.append(fright);
      foot.append(clr);
      foot.append(hidePanel);
      panel.append(head);
      panel.append(content);
      panel.append(foot);
      seeklink.append(panel);
      colmd.append(seeklink);
      root.append(colmd);
  }

  $(function () {

    var pageoffset = "${pageoffset}";
    var pagesize = "${pagesize}";
    $.pager(pageoffset,pagesize,4,window.location.pathname+"?key="+"仓鼠");

    $("#bodycontent").html("");
    <c:forEach items="${data}" var="n">
        note("${n.note.id}","${n.note.title}","${n.note.content}","${n.note.uid}","${n.note.notedate}","${n.commentCount}","${n.note.province}","${n.note.city}","${keyword}");
    </c:forEach>

  })
</script>
</html>
